<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <style>
        html, body {
            padding:0;
            margin:0;
        }

        .yui3-widget-content {
            background-color:#ccc;
            border:1px solid green;
        }
    </style>
</head>
<body>
    <script src="../../../../build/yui/yui.js"></script>
    <script src="../../../../build/widget-anim/widget-anim.js"></script>

    <button id="btn" type="button">Toggle</button>
    
    <div id="widget">
        My Widget Content
    </div>

    <script>
        YUI({filter:"raw"}).use("anim", "widget-anim", "widget", function(Y) {

            var w = new Y.Widget({
                srcNode:"#widget",
                visible:true,
                height:"200px",
                width:"200px",
                render:true
            });

            w.plug(Y.Plugin.WidgetAnim);

            Y.Node.one("#btn").on("click", function() {
                w.set("visible", !w.get("visible"));
            });
        });
    </script>
</body>
</html>
